<template>
  <view class="results-container">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
      <!-- 顶部导航 -->
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="page-title">搜索结果</text>
        <view class="header-right"></view>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <view class="scrollable-content">
      <scroll-view scroll-y class="resume-list-scroll">
        <view class="resume-card" v-for="resume in searchResults" :key="resume.id">
          <view class="card-inner-padding">
            <view class="candidate-header">
              <view class="candidate-avatar-placeholder">
                <text class="avatar-text-top">面试</text>
                <text class="avatar-text-bottom">FullTime</text>
              </view>
              <view class="candidate-main-info">
                <view class="name-tag-row">
                  <text class="nickname">{{ resume.name }}</text>
                </view>
                <text class="job-name">{{ resume.position }}</text>
              </view>
            </view>
            <view class="candidate-details-row">
              <text class="detail-item">{{ resume.experience }}年经验</text>
              <text class="detail-separator">|</text>
              <text class="detail-item salary">{{ resume.education }}</text>
              <text class="detail-separator">|</text>
              <text class="detail-item salary">{{ resume.expectedSalary }}</text>
            </view>
            <view class="card-bottom-row">
              <text class="apply-date">{{ formatTime(resume.updateTime) }}</text>
              <view class="action-buttons">
                <button class="action-btn contact-btn" @click.stop="contactResume(resume)">联系</button>
                <button class="action-btn view-resume-btn" @click="viewResume(resume)">查看简历</button>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="!searchResults || searchResults.length === 0">
        <text class="empty-title">暂无相关简历</text>
        <button class="back-btn-simple" @click="goBack">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sortBy: 'relevance',
      searchResults: [],
      activeFilters: {},
      hasFilters: false,
      loadingMore: false,
      showFilterModal: false,
      allResumes: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          avatar: '/static/touxiang.png',
          experience: 3,
          education: '本科',
          schoolType: '985',
          expectedSalary: '12k-18k',
          location: '北京',
          updateTime: '2024-01-15',
          skills: ['Vue.js', 'React', 'JavaScript', 'HTML/CSS', 'TypeScript'],
          matchScore: 95,
          viewCount: 128
        },
        {
          id: 2,
          name: '李四',
          position: 'Java开发工程师',
          avatar: '/static/touxiang.png',
          experience: 5,
          education: '硕士',
          schoolType: '211',
          expectedSalary: '15k-25k',
          location: '上海',
          updateTime: '2024-01-14',
          skills: ['Java', 'Spring Boot', 'MySQL', 'Redis', 'Microservices'],
          matchScore: 92,
          viewCount: 89
        },
        {
          id: 3,
          name: '王五',
          position: '产品经理',
          avatar: '/static/touxiang.png',
          experience: 4,
          education: '本科',
          schoolType: 'normal',
          expectedSalary: '18k-30k',
          location: '深圳',
          updateTime: '2024-01-13',
          skills: ['产品设计', '用户研究', '数据分隔线析', 'Axure', 'PRD'],
          matchScore: 88,
          viewCount: 156
        },
        {
          id: 4,
          name: '赵六',
          position: 'UI设计师',
          avatar: '/static/touxiang.png',
          experience: 2,
          education: '本科',
          schoolType: 'normal',
          expectedSalary: '8k-15k',
          location: '杭州',
          updateTime: '2024-01-16',
          skills: ['Figma', 'Sketch', 'Photoshop', 'Illustrator'],
          matchScore: 85,
          viewCount: 67
        }
      ]
    }
  },
  onLoad(options) {
    try {
      if (options.filters) {
        this.activeFilters = JSON.parse(decodeURIComponent(options.filters))
        this.hasFilters = Object.keys(this.activeFilters).some(key => this.activeFilters[key])
        this.searchResumes()
      } else {
        // 默认展示所有简历
        this.searchResults = [...this.allResumes]
      }
    } catch (error) {
      console.error('页面加载错误:', error)
      // 如果解析失败，显示所有简历
      this.searchResults = [...this.allResumes]
      this.activeFilters = {}
      this.hasFilters = false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    goBackToSearch() {
      uni.navigateBack()
    },
    searchResumes() {
      // 根据筛选条件搜索
      let results = this.allResumes.filter(resume => {
        const experienceMatch = !this.activeFilters.experience || 
          (this.activeFilters.experience === '0' && resume.experience == 0) ||
          (this.activeFilters.experience === '1-3' && resume.experience >= 1 && resume.experience <= 3) ||
          (this.activeFilters.experience === '3-5' && resume.experience >= 3 && resume.experience <= 5) ||
          (this.activeFilters.experience === '5-10' && resume.experience >= 5 && resume.experience <= 10) ||
          (this.activeFilters.experience === '10+' && resume.experience > 10)
        
        const educationMatch = !this.activeFilters.education || resume.education === this.activeFilters.education
        
        const schoolTypeMatch = !this.activeFilters.schoolType || resume.schoolType === this.activeFilters.schoolType
        
        const salaryMatch = !this.activeFilters.salary || 
          (this.activeFilters.salary === '0-5' && this.parseSalary(resume.expectedSalary) <= 5) ||
          (this.activeFilters.salary === '5-10' && this.parseSalary(resume.expectedSalary) > 5 && this.parseSalary(resume.expectedSalary) <= 10) ||
          (this.activeFilters.salary === '10-20' && this.parseSalary(resume.expectedSalary) > 10 && this.parseSalary(resume.expectedSalary) <= 20) ||
          (this.activeFilters.salary === '20-30' && this.parseSalary(resume.expectedSalary) > 20 && this.parseSalary(resume.expectedSalary) <= 30) ||
          (this.activeFilters.salary === '30+' && this.parseSalary(resume.expectedSalary) > 30)
        
        const locationMatch = !this.activeFilters.location || 
          resume.location === this.activeFilters.location ||
          resume.location.includes(this.getLocationName(this.activeFilters.location))
        
        return experienceMatch && educationMatch && schoolTypeMatch && salaryMatch && locationMatch
      })
      
      // 计算匹配度
      results.forEach(resume => {
        let score = 80
        if (this.activeFilters.experience) score += 10
        if (this.activeFilters.education) score += 5
        if (this.activeFilters.schoolType) score += 5
        resume.matchScore = Math.min(score, 99)
      })
      
      this.searchResults = results
    },
    parseSalary(salary) {
      const match = salary.match(/(\d+)(k?)/)
      return match ? parseInt(match[1]) : 0
    },
    getLocationName(locationValue) {
      // 将地点值转换为显示名称
      const locationMap = {
        'beijing-dongcheng': '北京',
        'beijing-xicheng': '北京',
        'beijing-chaoyang': '北京',
        'beijing-haidian': '北京',
        'beijing-fengtai': '北京',
        'beijing-shijingshan': '北京',
        'shanghai-huangpu': '上海',
        'shanghai-xuhui': '上海',
        'shanghai-changning': '上海',
        'shanghai-jingan': '上海',
        'shanghai-putuo': '上海',
        'shanghai-pudong': '上海',
        'guangzhou': '广州',
        'shenzhen': '深圳',
        'zhuhai': '珠海',
        'foshan': '佛山',
        'dongguan': '东莞',
        'zhongshan': '中山',
        'hangzhou': '杭州',
        'ningbo': '宁波',
        'wenzhou': '温州',
        'beijing': '北京',
        'shanghai': '上海'
      }
      return locationMap[locationValue] || locationValue
    },
    formatTime(dateStr) {
      const date = new Date(dateStr)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) return '今天'
      if (days === 1) return '昨天'
      if (days < 7) return `${days}天前`
      if (days < 30) return `${Math.floor(days / 7)}周前`
      return `${Math.floor(days / 30)}个月前`
    },
    getFilterDisplayName(key, value) {
      const filterNames = {
        experience: '工作经验',
        education: '学历要求',
        schoolType: '学校类型',
        salary: '薪资范围',
        location: '工作地点'
      }
      
      const valueNames = {
        '0': '应届生',
        '1-3': '1-3年',
        '3-5': '3-5年',
        '5-10': '5-10年',
        '10+': '10年以上',
        'college': '大专',
        'bachelor': '本科',
        'master': '硕士',
        'phd': '博士',
        '985': '985',
        '211': '211',
        'normal': '普通本科',
        'junior': '专科',
        '0-5': '5k以下',
        '5-10': '5k-10k',
        '10-20': '10k-20k',
        '20-30': '20k-30k',
        '30+': '30k以上',
        'beijing': '北京',
        'shanghai': '上海',
        'shenzhen': '深圳',
        'guangzhou': '广州',
        'hangzhou': '杭州'
      }
      
      return `${filterNames[key]}: ${valueNames[value] || value}`
    },
    removeFilter(key) {
      delete this.activeFilters[key]
      this.hasFilters = Object.keys(this.activeFilters).some(key => this.activeFilters[key])
      this.searchResumes()
    },
    clearAllFilters() {
      this.activeFilters = {}
      this.hasFilters = false
      this.searchResults = [...this.allResumes]
    },
    setSort(sort) {
      this.sortBy = sort
      
      switch(sort) {
        case 'time':
          this.searchResults.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime))
          break
        case 'experience':
          this.searchResults.sort((a, b) => b.experience - a.experience)
          break
        default:
          this.searchResults.sort((a, b) => b.matchScore - a.matchScore)
      }
    },
    viewResume(resume) {
      uni.navigateTo({
        url: `/pages/recruit/resume-detail?id=${resume.id}&name=${encodeURIComponent(resume.name)}&position=${encodeURIComponent(resume.position)}`
      })
    },
    contactResume(resume) {
      uni.showModal({
        title: '联系候选人',
        content: `确定要联系 ${resume.name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已发送联系请求',
              icon: 'success',
              duration: 2000
            })
            
            // 模拟联系记录
            setTimeout(() => {
              resume.viewCount = (resume.viewCount || 0) + 1
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.results-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow-x: hidden;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
}

.scrollable-content {
  flex: 1;
  margin-top: 140rpx; /* 为固定头部留出空间 */
  position: relative;
  background: transparent;
  z-index: 10;
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}





.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1rpx solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-button:active {
  transform: scale(0.9) translateY(2rpx);
  background: rgba(16, 185, 129, 0.25);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.header-right {
  position: absolute;
  top: 60rpx;
  right: 36rpx;
  display: flex;
  justify-content: flex-end;
}



.resume-list-scroll {
  height: calc(100vh - 140rpx);
  padding: 16rpx 0 24rpx;
}

.resume-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 0;
  margin-bottom: 24rpx;
  margin-left: 24rpx;
  margin-right: 24rpx;
  border: 1rpx solid #e2e8f0;
  transition: all 0.3s ease;
}

.resume-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
}

/* 确保第一个简历卡片有足够的显示空间 */
.resume-card:first-child {
  margin-top: 8rpx;
}

.card-inner-padding {
  padding: 36rpx;
}

.candidate-header {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
}

.candidate-avatar-placeholder {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: linear-gradient(135deg, #8b60ed 0%, #6a4aac 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: white;
  border: 2rpx solid #d4edda;
  box-shadow: 0 6rpx 12rpx rgba(139, 96, 237, 0.2);
}

.avatar-text-top {
  font-size: 24rpx;
  font-weight: 700;
  color: white;
  margin-bottom: 4rpx;
}

.avatar-text-bottom {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.candidate-main-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.name-tag-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}

.nickname {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
  margin-right: 12rpx;
}

.job-name {
  font-size: 28rpx;
  color: #666;
  margin-top: 4rpx;
}

.status-tag {
  position: relative;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.status-tag.pending {
  background-color: #fff3cd;
  color: #d4a700;
}

.status-tag.viewed {
  background-color: #e8f5e8;
  color: #28a745;
}

.status-tag.interviewed {
  background-color: #d1ecf1;
  color: #17a2b8;
}

.status-tag.unsuitable {
  background-color: #f8d7da;
  color: #dc3545;
}

.status-tag.on-hold {
  background-color: #e2e6ea;
  color: #6c757d;
}

.candidate-details-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16rpx;
}

.detail-item {
  font-size: 28rpx;
  color: #555;
  margin-right: 12rpx;
}

.detail-item.salary {
  color: #333333;
  font-weight: normal;
  margin-right: 0;
}

.detail-separator {
  font-size: 28rpx;
  color: #ccc;
  margin-right: 12rpx;
}

.card-bottom-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid #f0f0f0;
}

.apply-date {
  font-size: 26rpx;
  color: #999;
  align-self: flex-start;
}

.action-buttons {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.action-btn {
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  border-radius: 24rpx;
  border: 2rpx solid transparent;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140rpx;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 64rpx;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10rpx);
  box-shadow:
    0 6rpx 16rpx rgba(0, 0, 0, 0.08),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.2);
}

.contact-btn {
  background:
    linear-gradient(135deg, rgba(5, 162, 115, 0.08) 0%, rgba(5, 162, 115, 0.05) 100%),
    linear-gradient(135deg, #f1f3f4 0%, #e1e3e4 100%);
  color: #4a5568;
  border-color: rgba(5, 162, 115, 0.15);
}

.contact-btn:active {
  transform: scale(0.95) translateY(2rpx);
  box-shadow:
    0 3rpx 8rpx rgba(0, 0, 0, 0.12),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

.view-resume-btn {
  background: linear-gradient(135deg, #05a273 0%, #04c2a4 100%);
  color: white;
  border-color: rgba(5, 162, 115, 0.3);
  box-shadow:
    0 8rpx 25rpx rgba(5, 162, 115, 0.25),
    0 4rpx 12rpx rgba(5, 162, 115, 0.15),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.2);
}

.view-resume-btn:active {
  transform: scale(0.95) translateY(2rpx);
  box-shadow:
    0 4rpx 15rpx rgba(5, 162, 115, 0.3),
    0 2rpx 8rpx rgba(5, 162, 115, 0.2),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
}

.empty-state {
  padding: 100rpx 32rpx;
  text-align: center;
}

.empty-title {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
  display: block;
}

.back-btn-simple {
  padding: 20rpx 40rpx;
  background: #05A273;
  color: white;
  border: none;
  border-radius: 28rpx;
  font-size: 28rpx;
}


</style>

